<template>
  <div id="list-box">
    <div class="module">
      <div id="search-box">
        <Cascader
          v-model="typeVal"
          :data="typeList"
          trigger="hover"
          style="display:inline-block;width:300px;"
          placeholder="请选择分类"
        ></Cascader>
        <Button type="primary" icon="ios-search" @click="search"></Button>
      </div>
      <Table
        border
        max-height="500px"
        ref="selection"
        :loading="loading"
        :columns="headers"
        :data="dataList"
        @on-selection-change="selectVal"
      >
        <template slot-scope="{ row, index }" slot="introduct">
          <span :title="row.introduct">{{ row.introduct | lowString }}</span>
        </template>
        <template slot-scope="{ row, index }" slot="nickname">
          <span :title="row.nickname">{{ row.nickname?row.nickname:row.username }}</span>
        </template>
        <template slot-scope="{ row, index }" slot="action">
          <Button type="error" size="small" icon="ios-trash-outline" @click="remove(index)">还原</Button>
        </template>
      </Table>
      <div id="pages">
        <Page :total="dataList.length" @on-change="changeList"/>
      </div>
    </div>
  </div>
</template>
<script>
import { getAllList, getTypeSelect } from "@/config/api";
export default {
  name: "draft-list",
  data() {
    return {
      index: 0,
      typeList: [], //分类数据
      typeVal: [], //选择分类
      loading: true, //表格加载状态
      headers: [
        {
          type: "selection",
          width: 60,
          fixed: "left",
          align: "center"
        },
        {
          type: "index",
          width: 60,
          fixed: "left",
          align: "center"
        },
        {
          title: "标题",
          width: 200,
          fixed: "left",
          key: "title"
        },
        {
          title: "简介",
          slot: "introduct"
        },
        {
          title: "作者",
          slot: "nickname"
        },
        {
          title: "发布时间",
          width: 140,
          key: "create_time"
        },
        {
          title: "浏览量/次",
          width: 100,
          key: "see"
        },
        {
          title: "操作",
          slot: "action",
          fixed: "right",
          width: 150,
          align: "center"
        }
      ],
      dataList: [] //文章列表
    };
  },
  methods: {
    search() {
      if (this.typeVal.length != 0) {
        const type = this.typeVal[2];
        this.getList(type);
      } else {
        this.getList("0");
      }
    },
    show(index) {
      this.$Modal.info({
        title: "User Info",
        content: `Name：${this.dataList[index].name}<br>Age：${
          this.dataList[index].age
        }<br>Address：${this.dataList[index].address}`
      });
    },
    remove(index) {
      this.dataList.splice(index, 1);
    },
    selectVal(status) {
      console.log(status);
    },
    //获取文章列表
    getList(type) {
      getAllList(type, this.index, "3").then(result => {
        this.loading = false; //关闭加载
        this.dataList = result.data;
      });
    },
    //页数切换
    changeList(val) {
      this.index = (val - 1) * 10;
      if (this.typeVal.length != 0) {
        const type = this.typeVal[2];
        this.getList(type);
      } else {
        this.getList("0");
      }
    }
  },
  mounted() {
    //获取所有文章列表
    this.getList("0");

    //获取分类下拉
    getTypeSelect(true)
      .then(result => {
        this.typeList = result.data;
      })
      .catch(err => {
        throw err;
      });
  },
  filters: {
    lowString(val) {
      if (val.length > 30) {
        return val.substr(0, 30) + "...";
      } else {
        return val;
      }
    }
  }
};
</script>
<style scoped>
#list-box {
  height: 100%;
  display: flex;
  flex-direction: columns;
}
.module {
  flex: 1;
  border-radius: 2px;
  padding: 10px;
  margin: 5px;
  background-color: #fff;
}
#search-box {
  margin: 5px auto 20px auto;
}
#pages {
  padding: 5px 0;
}
</style>